import React, { Component, useState, useLayoutEffect } from 'react'

function Header () {
  const [ username, setUsername ] = useState('')
  useLayoutEffect(() => {
    setUsername(localStorage.getItem('username'))
  })
  return (
    <h1>header - { username }</h1>
  )
}
function Content () {
  const [ username, setUsername ] = useState('')
  useLayoutEffect(() => {
    setUsername(localStorage.getItem('username'))
  })
  return (
    <div>content - { username }</div>
  )
}


export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}
